/*
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-08 16:36:34
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-11 14:53:22
 */
import React, { useState, useRef, useEffect } from 'react'
import styles from './index.module.scss'
import { NavBar, TextArea } from 'antd-mobile'
import { TextAreaRef } from 'antd-mobile/es/components/text-area'
type Props = {
  name?: string
  hideComment: () => void
  onAddComment: (val: string) => void
}
const CommentItem = ({ name, hideComment, onAddComment }: Props) => {
  const [val, setVal] = useState('')
  /* 实现表单聚焦 */
  const textRef = useRef<TextAreaRef>(null)
  useEffect(() => {
    textRef.current!.focus()
  }, [])
  return <div className={styles.root}>
    <NavBar
      right={<span className="publish" onClick={() => onAddComment(val)}>发表</span>}
      onBack={hideComment}

    >
      {name ? '回复评论' : '评论文章'}
    </NavBar>

    {/* 文本输入框 */}
    <div className="input-area">
      {/* 回复别人的评论时显示：@某某 */}

      {/* 评论内容输入框 */}
      <TextArea
        ref={textRef}
        value={val}
        onChange={(val) => setVal(val)}
        placeholder="说点什么~"
        rows={10}
      />
    </div>
  </div >
};
export default CommentItem